<!DOCTYPE html>
<html xmlns="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<base th:href="@{/}" />
<title>Insert title here</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="@{/css/Managerstyle.css}"/>
<script th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<style>
 #r{
	 padding:7px;		
	 width: 300px !important;
	 height: 30px;
}

</style>
</head>
<body>
	<div class="contain">
		<h3>修改教学楼</h3>
		<div class="modify">
			<form action="mc/modifyClassroom" method="post">
				<dl class="dl-horizontal">
					<dt>教室号：</dt>
					<dd><input th:value="${classroom.clrnum}" readonly="readonly" maxlength="3" type="text" name="clrnum" class="form-control" style="width: 120px;"></dd>
					<br>
					<dt>所属教学楼：</dt>
					<dd><input th:value="${classroom.building.buildname}" readonly="readonly" maxlength="3" type="text"  class="form-control" style="width: 120px;"></dd>
					<br>
					<dt>教室类型：</dt>
					<dd>
				  		<select name="classrmtype" >
							<option value="1">普通教室</option>
							<option value="2">多媒体教室</option>
						</select>
					</dd>
					<br>
					<dt>教室容量：</dt>
					<dd><div id="r"><input class="range" id="range" style="display: inline; width: 200px;" name="maxcapacity" type="range" min="15" max="300" step="5" onchange="b.value=this.value"/><span class="value" id="b" for="range1" style="display: inline;" >150</span></div></dd>
				</dl>
				<input type="hidden" name="classrmid" th:value="${classroom.classrmid}">
				<input type="hidden" name="buildingId" th:value="${classroom.building.buildingId}">
				<input type="submit" class="btn btn-primary" value="提 交">
			</form>
		</div>
	</div>


<script>
		var elem = document.querySelector('input[type="range"]');
		var rangeValue = function(){
	 	 var newValue = elem.value;
	 	 var target = document.querySelector('.value');
	 	 target.innerHTML = newValue;
		}
		elem.addEventListener("input", rangeValue);
		
</script>
</body>
</html>